<!--
 * @Author: 清羽
 * @Date: 2022-08-21 22:47:11
 * @LastEditTime: 2022-09-02 08:21:17
 * @LastEditors: you name
 * @Description: 
-->
<!-- add 页 -->
<template>
  <div class="app-container">
    <el-steps
      :active="active"
      finish-status="success"
    >
      <el-step title="创建商品信息"></el-step>
      <el-step title="上传商品素材"></el-step>
      <el-step title="配置商品规格"></el-step>
      <el-step title="提交商品审核"></el-step>
    </el-steps>

    <div class="main">

      <!-- <el-form ref="form"
               label-width="150px">

        <el-form-item label="商品名称:">
          <el-input></el-input>
        </el-form-item>

        <el-form-item label="商品所属商城分类:">
          <el-cascader placeholder="请选择商品所属商城分类"></el-cascader>
        </el-form-item>

        <el-form-item label="商品所属店铺分类:">
          <el-cascader placeholder="请选择商品所属店铺分类"></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-top: 12px;"
                     type="primary"
                     @click="next">下一步</el-button>
        </el-form-item>
      </el-form> -->

      <StepsOne
        v-if="active==0"
        @active="activeFn"
        :active="active"
      />

      <StepsTwo
        v-else-if="active==1"
        @active="activeFn"
      />

      <StepsThree
        v-else-if="active==2"
        @active="activeFn"
      />

      <StepsFour
        v-else-if="active==3"
        @active="activeFn"
      />

    </div>

  </div>

</template>

<script>
import StepsOne from './components/addStepsOne'
import StepsTwo from './components/addStepsTwo.vue'
import StepsThree from './components/addStepsThree.vue'
import StepsFour from './components/addStepFour.vue'
export default {
  name: "add",
  data () {
    return {
      active: 0
    }
  },
  components: { StepsOne, StepsTwo, StepsThree, StepsFour },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  // 函数
  methods: {
    activeFn (value) {
      this.active = value
    }

  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.main {
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // height: 80vh;
  // min-width: 84vw;
  margin-top: 20px;
  .el-form {
    width: 50rem;
    // height: 500px;
  }
}
</style>